<% include index.html %>
<style>
    html,body {
        height: 100%;
    }
    .box {
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c8dbc', endColorstr='#3c8dbc'); /*  IE */
        background-image:linear-gradient(bottom, #3c8dbc 0%, #3c8dbc 100%);
        background-image:-o-linear-gradient(bottom, #3c8dbc 0%, #3c8dbc 100%);
        background-image:-moz-linear-gradient(bottom, #3c8dbc 0%, #3c8dbc 100%);
        background-image:-webkit-linear-gradient(bottom, #3c8dbc 0%, #3c8dbc 100%);
        background-image:-ms-linear-gradient(bottom, #3c8dbc 0%, #3c8dbc 100%);

        margin: 0 auto;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .login-box {
        width: 100%;
        max-width:500px;
        height: 400px;
        position: absolute;
        top: 50%;

        margin-top: -200px;
        /*设置负值，为要定位子盒子的一半高度*/

    }
    @media screen and (min-width:500px){
        .login-box {
            left: 50%;
            /*设置负值，为要定位子盒子的一半宽度*/
            margin-left: -250px;
        }
    }

    .form {
        width: 100%;
        max-width:500px;
        height: 275px;
        margin: 25px auto 0px auto;
        padding-top: 25px;
    }
    .login-content {
        height: 300px;
        width: 100%;
        max-width:500px;
        background-color: rgba(255, 250, 2550, .6);
        float: left;
    }


    .input-group {
        margin: 0px 0px 30px 0px !important;
    }
    .form-control,
    .input-group {
        height: 40px;
    }

    .form-group {
        margin-bottom: 0px !important;
    }
    .login-title {
        padding: 20px 10px;
        background-color: rgba(0, 0, 0, .6);
    }
    .login-title h1 {
        margin-top: 10px !important;
    }
    .login-title small {
        color: #fff;
    }

    .link p {
        line-height: 20px;
        margin-top: 30px;
    }
    .btn-sm {
        padding: 8px 24px !important;
        font-size: 16px !important;
    }



</style>
<div class="box" ng-controller="loginCtrl">
    <div class="login-box">
        <div class="login-title text-center">
            <h1><small>IR4 Domain Integration Knowledge Base System</small></h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <form action="#" method="post">


                    <div class="form-group">
                        <div class="row" style="margin-bottom:10px;">
                            <span style="color: red;width:100%;text-align:center;display:block;" >{{message}}</span>
                        </div>
                        <div class="col-xs-12  ">



                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" id="username" name="username" class="form-control" ng-model="user.userName" placeholder="UserName" ng-keyup="keyUp($event)" ng-focus="clearMessage()">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12  ">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" id="password" name="password" class="form-control" ng-model="user.password" placeholder="Password" ng-keyup="keyUp($event)" ng-focus="clearMessage()">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-actions">
                        <div class="col-xs-4 col-xs-offset-4 ">
                            <button type="button" class="btn btn-sm btn-info" ng-click="login()" >Sign in</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

